<template>
    <div class="box">
        <!-- 开幕式及全体大会 -->
        <div class="above">
            <h2>开幕式及全体大会</h2>
            <div class="live">
                <div class="left">
                    <div class="player">
                        <!-- <MyVideo video="" cover=""/> -->
                        <!-- https://live.vhall.com/f48b6dad-e97c-4d4e-9447-a3914d85f45f -->
                        <video
                            id="video"
                            poster="https://obs-xhlj.obs.cn-east-3.myhuaweicloud.com/2023/3/9a010a40075e4c048ed860bb4016e95f.jpg"
                            muted
                            loop
                            src="https://img2023.gcsis.cn/2023/3/dd8d928e6e734c9592cb5833597564c6.mp4"
                            autoplay
                            >
                        </video>
                    </div>
                    <div class="footer">
                        <div class="data">
                            <svg t="1711467009234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4479" width="32" height="32"><path d="M614.4 1024h-204.8c-190.171429 0-343.771429 0-343.771429-95.085714v-21.942857c0-190.171429 153.6-343.771429 343.771429-343.771429h204.8c190.171429 0 343.771429 153.6 343.771429 343.771429v21.942857C958.171429 1024 797.257143 1024 614.4 1024z m-204.8-402.285714c-160.914286 0-292.571429 131.657143-292.571429 285.257143v21.942857c0 43.885714 160.914286 43.885714 292.571429 43.885714h204.8c109.714286 0 292.571429 0 292.571429-43.885714v-21.942857c0-160.914286-131.657143-285.257143-292.571429-285.257143h-204.8z m95.085714-80.457143c-153.6 0-270.628571-124.342857-270.628571-270.628572 0-73.142857 29.257143-138.971429 80.457143-190.171428C365.714286 29.257143 431.542857 0 504.685714 0c153.6 0 270.628571 124.342857 270.628572 270.628571s-124.342857 270.628571-270.628572 270.628572z m-219.428571-270.628572c0 117.028571 95.085714 212.114286 219.428571 212.114286s219.428571-95.085714 219.428572-212.114286-95.085714-212.114286-219.428572-212.114285c-58.514286 0-117.028571 21.942857-153.6 65.828571-43.885714 43.885714-65.828571 95.085714-65.828571 153.6" fill="#e6e6e6" p-id="4480"></path></svg>                        
                            <p>1</p>
                            <svg t="1711467561068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6510" width="32" height="32"><path d="M0 0h1024v1024H0z" fill-opacity=".01" p-id="6511" fill="#e6e6e6"></path><path d="M512 974.222222A347.875556 347.875556 0 0 1 155.875556 625.777778a315.733333 315.733333 0 0 1 38.115555-167.537778 386.275556 386.275556 0 0 1 58.595556-74.24l20.48-22.471111 13.368889-14.791111a231.822222 231.822222 0 0 0 45.226666-65.422222 500.622222 500.622222 0 0 0 40.106667-193.422223 38.115556 38.115556 0 0 1 62.293333-28.444444l19.626667 15.928889A700.302222 700.302222 0 0 1 607.288889 227.555556a711.111111 711.111111 0 0 1 77.937778 170.666666 161.564444 161.564444 0 0 0 25.884444-72.533333 38.115556 38.115556 0 0 1 30.151111-32.711111 37.546667 37.546667 0 0 1 40.96 19.911111 540.444444 540.444444 0 0 1 56.888889 133.688889 500.053333 500.053333 0 0 1 28.444445 174.933333A355.555556 355.555556 0 0 1 512 974.222222zM442.311111 162.702222A508.302222 508.302222 0 0 1 398.222222 316.871111a306.915556 306.915556 0 0 1-56.888889 81.066667l-12.8 14.222222-21.617777 23.608889a321.991111 321.991111 0 0 0-48.071112 63.715555A244.906667 244.906667 0 0 0 232.106667 625.777778 272.497778 272.497778 0 0 0 512 897.991111a279.324444 279.324444 0 0 0 280.177778-277.902222 426.666667 426.666667 0 0 0-24.177778-151.04c-4.835556-15.36-9.102222-28.444444-12.8-38.115556a236.373333 236.373333 0 0 1-63.715556 68.551111l-2.844444 1.991112A38.115556 38.115556 0 0 1 625.777778 471.324444a736.426667 736.426667 0 0 0-82.488889-199.111111 530.773333 530.773333 0 0 0-100.977778-109.511111z" fill="#e6e6e6" p-id="6512"></path></svg>
                            <p>33445566</p>
                        </div>
                        <div class="function">
                            <svg t="1711467701431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11009" width="50" height="50"><path d="M319 125.748l-22 36-3.333 38.666 12.667 34 18 24.69 140 11.31H715l12-35.333 10.667-50-16.667-46-48-26.667-50-5.333-56.666 38-14 34.667-19 19L521 210.414l-18.666-18.666-54.667-42-29.412-32.667-35.255-10h-44z" fill="#F4DD50" p-id="11010"></path><path d="M171 599.122V411.82c0-16.016 12.984-29 29-29h624c16.016 0 29 12.984 29 29v479.978c0 16.016-12.984 29-29 29H200c-16.016 0-29-12.984-29-29V667.122" fill="#E7402E" p-id="11011"></path><path d="M824 935.798H200c-24.262 0-44-19.738-44-44V667.122c0-8.284 6.716-15 15-15s15 6.716 15 15v224.676c0 7.72 6.28 14 14 14h624c7.72 0 14-6.28 14-14V411.82c0-7.72-6.28-14-14-14H200c-7.72 0-14 6.28-14 14v187.302c0 8.284-6.716 15-15 15s-15-6.716-15-15V411.82c0-24.262 19.738-44 44-44h624c24.262 0 44 19.738 44 44v479.978c0 24.262-19.738 44-44 44zM715.507 111.064c-42.928-35.238-106.509-29.041-141.799 13.865l-54.361 66.147-69.726-66.934c-35.378-42.198-98.473-48.118-141.134-13.078-42.909 35.268-49.117 98.883-13.846 141.799a16.557 16.557 0 0 0 11.205 6.003 16.575 16.575 0 0 0 12.159-3.712c7.082-5.818 8.108-16.278 2.291-23.364-23.64-28.831-19.496-71.355 9.272-95.076 28.834-23.633 71.359-19.477 95.069 9.297 0.407 0.498 0.851 0.973 1.326 1.429l72.245 69.369-12.44 15.125c-5.818 7.087-4.791 17.546 2.291 23.364 7.086 5.817 17.546 4.791 23.364-2.292l87.948-106.996c23.63-28.774 66.283-32.923 95.069-9.297 28.77 23.717 32.92 66.249 9.271 95.076a16.6 16.6 0 0 0-2.88 16.482 16.6 16.6 0 0 0 28.535 4.59c35.27-42.913 29.049-106.529-13.859-141.797z m0 0" fill="#3D100B" p-id="11012"></path><path d="M418.255 471.645h187.491v434.152H418.255z" fill="#F4DD50" p-id="11013"></path><path d="M252.513 470.458H126.005c-16.016 0-29-12.984-29-29v-148c0-16.016 12.984-29 29-29h771.991c16.016 0 29 12.984 29 29v148c0 16.016-12.984 29-29 29H329.513" fill="#E7402E" p-id="11014"></path><path d="M897.995 485.457H329.512c-8.284 0-15-6.716-15-15s6.716-15 15-15h568.483c7.72 0 14-6.28 14-14v-148c0-7.72-6.28-14-14-14h-771.99c-7.72 0-14 6.28-14 14v148c0 7.72 6.28 14 14 14h126.508c8.284 0 15 6.716 15 15s-6.716 15-15 15H126.005c-24.262 0-44-19.738-44-44v-148c0-24.262 19.738-44 44-44h771.991c24.262 0 44 19.738 44 44v148c-0.001 24.262-19.739 44-44.001 44z" fill="#3D100B" p-id="11015"></path><path d="M767.078 336.64h-206.99c-8.284 0-15-6.716-15-15s6.716-15 15-15h206.99c8.284 0 15 6.716 15 15s-6.716 15-15 15zM860.073 336.64h-40.498c-8.284 0-15-6.716-15-15s6.716-15 15-15h40.498c8.284 0 15 6.716 15 15s-6.715 15-15 15z" fill="#FFFFFF" p-id="11016"></path></svg>
                            <svg t="1711467793371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17220" width="64" height="64"><path d="M775.7 593.9c10.2-14.8 15.4-31.2 15.4-49 0-20.6-7.9-38.6-23.8-53.8-15.9-15.2 20.1-34.5-1.7-34.5l-43.5-21c10-19.8-108-2.4-108-21 0-23.4 23.8-38.7 16.5-52.5-7.3-13.8 11.1-31.5-2.9-38s-29.8-9.8-47.4-9.8c-10.7 0-20.1 3.7-28.2 11.1-9 8.4-15.5 19.2-19.4 32.5-4 13.2-7.2 25.9-9.6 38-2.4 12.1-6.1 20.7-11.1 25.7-10.2 10.6-21.4 23.4-33.6 38.5-21.1 26.3-35.4 41.8-43 46.6h-85.9c-11.1 0-20.5 3.8-28.4 11.3-7.8 7.5-11.8 16.6-11.8 27.2v192.4c0 10.6 3.9 19.7 11.8 27.2 7.8 7.5 17.3 11.3 28.4 11.3h90.3c4.6 0 19 4 43.3 12 25.7 8.6 48.3 15.2 67.9 19.7 19.6 4.5 39.4 6.8 59.4 6.8h40.5c29.5 0 53.2-8.1 71.2-24.2s26.9-38.1 26.7-66c12.5-15.4 18.8-33.3 18.8-53.5 0-4.4-0.3-8.7-0.9-12.9 7.9-13.4 11.9-27.9 11.9-43.3-0.1-7.3-1-14.2-2.9-20.8z" fill="#25B195" p-id="17221"></path><path d="M357.6 771c-6.2-10.5-6.3-21-4.5-32.5 3.5-34.3-1.3-69-1.4-103.3-0.2-32-1.5-64.1-4.5-96-1-10.8-1.5-21.6-1.7-32.4h-26.9c-10 0-18.6 3.8-25.6 11.3-7.1 7.5-10.6 16.6-10.6 27.2v192.4c0 10.6 3.5 19.7 10.6 27.2s15.6 11.3 25.6 11.3h42.5c-1.3-1.8-2.5-3.5-3.5-5.2zM648.5 788.4c-10.5 8.2-21.4 17.2-33.2 23.6 15.7-3.5 29-10.7 40-21.6 6.2-6.1 11.1-13.1 14.9-20.9-7 6.7-14.2 13-21.7 18.9z" fill="#25B195" p-id="17222"></path><path d="M784.9 549.5c12.4-18.8 18.6-39.4 18.6-62 0-26.1-9.6-48.8-28.9-68-19.3-19.3-42.1-28.9-68.5-28.9h-67c12.2-25.1 18.3-49.4 18.3-73 0-29.6-4.4-53.2-13.3-70.7s-21.8-30.3-38.8-38.6c-17-8.2-36.2-12.4-57.5-12.4-12.9 0-24.4 4.7-34.3 14.1-10.9 10.6-18.8 24.3-23.6 41.1-4.8 16.7-8.7 32.8-11.6 48.1-2.9 15.3-7.4 26.2-13.5 32.5-12.4 13.4-26 29.6-40.7 48.6-25.6 33.2-43 52.8-52.1 58.9H267.7c-13.5 0-24.9 4.7-34.4 14.3-9.5 9.5-14.3 21-14.3 34.4v243.3c0 13.4 4.8 24.9 14.3 34.4s21 14.3 34.4 14.3h109.6c5.6 0 23.1 5.1 52.5 15.2 31.2 10.9 58.7 19.2 82.4 24.9 23.7 5.7 47.8 8.6 72.1 8.6h49.1c35.8 0 64.6-10.2 86.4-30.6 21.8-20.4 32.6-48.2 32.4-83.4 15.2-19.5 22.8-42.1 22.8-67.7 0-5.6-0.4-11-1.1-16.3 9.6-17 14.5-35.2 14.5-54.7 0-9.3-1.2-18-3.5-26.4zM330 721c0 6.6-5.4 12-12 12h-54c-6.6 0-12-5.4-12-12V498c0-6.6 5.4-12 12-12h54c6.6 0 12 5.4 12 12v223z m416.7-202.3c-5.5 11.7-12.2 17.6-20.4 17.9 3.8 4.3 7 10.3 9.5 18.1 2.5 7.7 3.8 14.8 3.8 21.1 0 17.5-6.7 32.6-20.2 45.2 4.6 8.1 6.9 16.9 6.9 26.2s-2.2 18.7-6.7 27.9c-4.4 9.3-10.5 15.9-18.1 20 1.3 7.6 1.9 14.7 1.9 21.3 0 42.3-24.4 63.5-73.1 63.5h-46c-33.2 0-76.6-9.2-130.2-27.8-1.3-0.5-4.9-1.8-11-4-6.1-2.1-10.6-3.7-13.5-4.8-2.9-1-7.4-2.5-13.3-4.4-6-1.9-10.8-3.3-14.5-4.2-3.7-0.9-7.9-1.7-12.6-2.5-4.7-0.8-8.7-1.1-12-1.1H365V487.9h12.2c4.1 0 8.6-1.1 13.5-3.4s10-5.7 15.2-10.3c5.2-4.6 10.1-9.1 14.7-13.5s9.6-10 15.2-16.7c5.6-6.7 10-12.1 13.1-16.2 3.2-4.1 7.2-9.3 12-15.6 4.8-6.3 7.7-10.1 8.8-11.4 13.9-17.2 23.7-28.8 29.3-34.6 10.4-10.9 17.9-24.8 22.6-41.6 4.7-16.9 8.6-32.8 11.6-47.7 3-14.9 7.9-25.7 14.5-32.3 24.4 0 40.6 6 48.7 17.9 8.1 11.9 12.2 30.3 12.2 55.1 0 15-6.1 35.3-18.3 61-12.2 25.7-18.3 45.9-18.3 60.6h134c12.7 0 24 4.9 33.9 14.6 9.9 9.8 14.8 21.1 14.8 34 0.2 9-2.6 19.3-8 30.9z" fill="#595857" p-id="17223"></path><path d="M290.5 687.5m-20.5 0a20.5 20.5 0 1 0 41 0 20.5 20.5 0 1 0-41 0Z" fill="#595857" p-id="17224"></path></svg>
                        </div>
                        
                    </div>
                </div>

                <div class="right">
                    <Tabs/>
                </div>
                
            </div>
        </div>
        <!-- 其他直播 -->
        <div class="below">
            <h2>其他直播</h2>
            <div class="content">
                <Card v-for="item in 12" :key="item" class="item"/> 
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
//引入标签组件
import Tabs from './tabs/index.vue';
//引入card展示其他直播
import Card from './card/index.vue'
//引入视频组件
// import MyVideo from './video/indes.vue'

// export default {
// 	components:{
//         MyVideo
//     }
// }
</script>

<style scoped lang="scss">
.box{
    background-color: #fff;
    width: 100%;
    height: auto;
    h2{
        margin-top: 4.1667vw;
    }
    .above{
        width: 100%;
        height: auto;
        background-color: #fff;
        .live{
            width: 100%;
            height: 35vw;
            margin-top: 3vw;
            display: flex;
            justify-content: center;
            .left{
                width: 70%;
                height: 100%;
                .player{
                    width: 100%;
                    height: auto;
                    background-color: #202124;
                    video{
                        width: 100%;
                        height: 100%;
                    }
                    
                }
                .footer{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    height: 10%;
                    background-color: #202124;
                    .data{
                        display: flex;
                        justify-content: left;
                        align-items: center;
                        
                    }
                    svg{
                        margin-left: 2vw;
                    }
                    p{
                        color: #e6e6e6;
                        font-size: 1.5vw;
                        font-weight: lighter;
                        margin-left: 0.5vw;
                    }
                    .function{
                        margin-right: 1vw;
                        display: flex;
                        justify-content: right;
                        align-items: center;
                        svg{
                            margin: 0 0.5vw;
                        }
                    }
                }
            }
            .right{
                width: 30%;
                height: 32.9vw;
                background-color: #202124;
            }
            
        }
        
    }

    .below{
        widows: 100%;
        background-color: #fff;
        height: 100vw;
        .content{
            background-color: #fff;
            height: auto;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .item{
                display: flex;
                justify-content: center;
                margin-top: 4vw;
                width: auto;
            }
            .item:hover{
                border: 2px solid black;
                border-radius: 1vw;
            }

        }
    }
}

</style>